<template>
  <div class="contant">
    <el-card>
      <el-row type="flex" justify="space-between">
        <!-- 输入框 -->
        <el-form :inline="true" class="demo-form-inline" :model="queryData">
          <el-form-item>
            <el-input
              placeholder="学科名称"
              size="small "
              v-model="queryData.class_name"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="queryData.subject_id"
              placeholder="归属学科"
              size="small "
            >
              <el-option
                v-for="item in queryData.selectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              placeholder="显示状态"
              size="small "
              v-model="queryData.state"
            >
              <el-option value="1" label="显示"></el-option>
              <el-option value="2" label="隐藏"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain size="small" @click="initData()"
              >搜索</el-button
            >
            <el-button size="small" @click="chongzhi">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row >
          <el-button
            type="primary"
            plain
            size="small"
            @click="showDialog = true"
            >创建班级</el-button
          >
        </el-row>
      </el-row>

      <!-- 表格 -->
      <el-table :data="list" border style="width: 100%">
        <el-table-column
          fixed
          label="#"
          width="50"
          align="center"
          type="expand"
          :header-cell-style="{ color: '#64646d', backgroundColor: '#fafafa' }"
        >
          <template slot-scope="{ row }">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              label-width="100px"
            >
              <el-form-item style="margin-right: 200px">
                <el-form-item label="班级名称"
                  ><span>{{ row.class_name }}</span></el-form-item
                ><br />
                <el-form-item label="归属学科"
                  ><span>{{ row.subject_name }}</span></el-form-item
                >

                <br />
                <el-form-item label="创建人"
                  ><span>{{ row.username }}</span></el-form-item
                ><br />
                <el-form-item label="开始结束日期"
                  ><span>
                    {{ row.start_time | dateFormat }} 至
                    {{ row.end_time | dateFormat }}</span
                  ></el-form-item
                >
              </el-form-item>
              <el-form-item>
                <el-form-item label="创建日期"
                  ><span>{{ row.created_at }}</span></el-form-item
                ><br />
                <el-form-item label="讲师">
                  <el-tag
                    v-for="(item, index) in JSON.parse(row.teacher_info)"
                    :key="index"
                    style="margin-right: 10px"
                  >
                    {{ item.username }}
                  </el-tag>
                  <span v-if="JSON.parse(row.teacher_info).length == 0"
                    >没有关联教师</span
                  >
                </el-form-item>

                <br />

                <el-form-item label="助教">
                  <el-tag
                    v-for="(item, index) in JSON.parse(row.zhujiao_info)"
                    :key="index"
                    style="margin-right: 10px"
                    type="success"
                  >
                    {{ item.username }}
                  </el-tag>
                  <span v-if="JSON.parse(row.zhujiao_info).length == 0"
                    >没有关联教师</span
                  ></el-form-item
                ><br />

                <el-form-item label="班主任">
                  <el-tag
                    v-for="(item, index) in JSON.parse(row.manager_info)"
                    :key="index"
                    type="warning"
                  >
                    {{ item.username }}
                  </el-tag>
                  <span v-if="JSON.parse(row.manager_info).length == 0"
                    >没有关联教师</span
                  ></el-form-item
                ></el-form-item
              >
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="id" label="班级ID" width="70" align="center">
        </el-table-column>
        <el-table-column prop="class_name" label="班级名称" width="200">
        </el-table-column>
        <el-table-column prop="subject_name" label="归属学科" width="160">
        </el-table-column>
        <el-table-column
          label="讲师"
          width="150"
          align="center"
          prop="teacher_info"
        >
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) in JSON.parse(row.teacher_info)"
              :key="index"
              style="margin-right: 10px"
            >
              {{ item.username }}
            </el-tag>
            <span v-if="JSON.parse(row.teacher_info).length == 0"
              >没有关联教师</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="zhujiao_info"
          label="助教"
          width="150"
          align="center"
          style="margin-right: 10px"
        >
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) in JSON.parse(row.zhujiao_info)"
              :key="index"
              style="margin-right: 10px"
              type="success"
            >
              {{ item.username }}
            </el-tag>
            <span v-if="JSON.parse(row.zhujiao_info).length == 0"
              >没有关联教师</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="manager_info"
          label="班主任"
          width="150"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-tag
              v-for="(item, index) in JSON.parse(row.manager_info)"
              :key="index"
              type="warning"
            >
              {{ item.username }}
            </el-tag>
            <span v-if="JSON.parse(row.manager_info).length == 0"
              >没有关联教师</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建人"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="state"
          label="是否显示"
          width="120"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.state"
              active-text="是"
              :active-value="1"
              :inactive-value="2"
              inactive-text="否"
              @change="stateEdit(row.state, row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="start_time"
          label="开始结束日期"
          width="240"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.start_time | dateFormat }} 至 {{ row.end_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="160" align="center">
          <template slot-scope="{ row }">
            {{ row.created_at }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editHandler(row.id)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delBtn(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 弹框 -->
    <el-dialog
      :title="formData.id ? '修改班级' : '添加班级'"
      v-if="showDialog"
      :visible.sync="showDialog"
      @close="close"
    >
      <el-form :model="formData" :inline="true" v-if="showDialog">
        <el-row type="flex" justify="space-around">
          <el-form-item label="归属学科">
            <el-select
              v-model="formData.subject_id"
              placeholder="归属学科"
              size="small "
            >
              <el-option
                v-for="item in selectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级名称">
            <el-input
              v-model="formData.class_name"
              label="班级名称"
              style="width: 350px"
              placeholder="请输入班级名称"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="授课老师" label-width="120px">
            <el-select
              v-model="formData.teacher_info"
              placeholder="请选择"
              size="small "
              multiple
              @focus="getShoukeTeacher('讲师')"
            >
              <el-option
                v-for="item in teacherName"
                :key="item.user_id"
                :label="item.username"
                :value="item.user_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="助教老师"
            label-width="120px"
            style="margin-left: 55px"
          >
            <el-select
              v-model="formData.zhujiao_info"
              placeholder="请选择"
              size="small "
              multiple
              @focus="getZhujiaoTeacher('助教')"
            >
              <el-option
                v-for="item in zhujiaoName"
                :key="item.user_id"
                :label="item.username"
                :value="item.user_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="班主任老师" label-width="120px">
            <el-select
              v-model="formData.manager_info"
              placeholder="请选择"
              size="small "
              multiple
              @focus="getManagerTeacher('班主任')"
            >
              <el-option
                v-for="item in managerName"
                :key="item.user_id"
                :label="item.username"
                :value="item.user_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="开课结课日期"
            label-width="120px"
            style="margin-left: 55px"
          >
            <el-date-picker
              v-model="Time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd hh:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="排序" label-width="120px">
            <el-input-number
              v-model="formData.sort"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="班级状态"
            label-width="120px"
            style="margin-left: 55px"
          >
            <el-switch
              v-model="formData.state"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetClassList,
  queryClassApi,
  TeacherClassListApi,
  PostClassApi,
  StateTagyApi,
  DelTagApi,
  StateClassListApi,
  PutTagApi,
} from "@/api/class/class.js";
export default {
  data() {
    return {
      queryData: {
        class_name: "",
        state: "",
        page: 1,
        limit: 10,
        subject_id: "",
        selectList: [],
      },
      formData: {
        sort: 10,
        class_name: "",
        state: "",
        subject_id: "",
        teacher_info: "[]",
        zhujiao_info: "[]",
        manager_info: "[]",
        start_time: "",
        end_time: "",
        id: "",
      },
      selectList: [],
      teacherName: [],
      managerName: [],
      zhujiaoName: [],
      Time: [],
      list: [],
      total: 0,
      showDialog: false,
    };
  },
  filters: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year + "-" + month + "-" + day;
    },
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let { list, total } = await GetClassList(this.queryData);
      // console.log(list);
      this.list = list;
      this.total = total;
      let res = await queryClassApi();
      // console.log(res);
      this.queryData.selectList = res;
      this.selectList = res;
    },

    // 重置
    chongzhi() {
      this.queryData = {};
      this.initData();
    },

    //获取老师信息
    async getShoukeTeacher(name) {
      let res = await TeacherClassListApi({
        role_name: name,
      });
      // console.log(Object.keys(res),Object.values(res));
      // console.log(Object.prototype.toString.call(res),Array.from(res));
      this.teacherName = res;
    },
    async getZhujiaoTeacher(name) {
      let res = await TeacherClassListApi({
        role_name: name,
      });
      // console.log(res);
      this.zhujiaoName = res;
    },
    async getManagerTeacher(name) {
      let res = await TeacherClassListApi({
        role_name: name,
      });
      // console.log(res);
      this.managerName = res;
    },

    // 确认添加
    async btnOk() {
      this.formData.start_time = new Date(
        new Date(this.Time[0]).getTime() + 8 * 3600 * 1000
      ).toISOString();
      this.formData.end_time = new Date(
        new Date(this.Time[1]).getTime() + 8 * 3600 * 1000
      ).toISOString();
      if (this.formData.id) {
        await PutTagApi({
          class_name: this.formData.class_name,
          subject_id: this.formData.subject_id,
          teacher_info: this.teacherName,
          zhujiao_info: this.zhujiaoName,
          manager_info: this.managerName,
          state: this.formData.state,
          sort: this.formData.sort,
          start_time: this.formData.start_time,
          end_time: this.formData.end_time,
          id: this.formData.id,
        });
        this.$message.success("修改成功");
        this.showDialog = false;
        this.initData();
      } else {
        await PostClassApi({
          class_name: this.formData.class_name,
          subject_id: this.formData.subject_id,
          teacher_info: this.formData.teacher_info.map(
            (username, item) => this.teacherName[item]
          ),
          zhujiao_info: this.formData.zhujiao_info.map(
            (username, item) => this.zhujiaoName[item]
          ),
          manager_info: this.formData.teacher_info.map(
            (username, item) => this.managerName[item]
          ),
          state: this.formData.state,
          sort: this.formData.sort,
          start_time: this.formData.start_time,
          end_time: this.formData.end_time,
        });
        this.$message.success("添加成功");
        this.showDialog = false;
        console.log(this.formData.manager_info);
        this.initData();
      }
    },

    // 修改
    async editHandler(id) {
      let res = await StateClassListApi(id);
      console.log(res);
      this.formData = res;
      this.formData.zhujiao_info = JSON.parse(res.zhujiao_info).map(
        (item) => item.username
      );
      this.formData.manager_info = JSON.parse(res.manager_info).map(
        (item) => item.username
      );
      // console.log(this.formData.manager_info);
      this.formData.teacher_info = JSON.parse(res.teacher_info).map(
        (item) => item.username
      );

      this.formData.start_time = res.start_time
        .substring(0, 19)
        .replace("T", " ");
      this.formData.end_time = res.end_time.substring(0, 19).replace("T", " ");
      this.Time = [
        this.formData.start_time,
        (this.formData.end_time = res.end_time),
      ];
      this.showDialog = true;
    },

    // 点击修改状态
    async stateEdit(state, id) {
      await StateTagyApi({
        id: id,
        state: state === 2 ? 2 : 1,
      });
      this.$message.success("修改成功");
    },

    // 删除
    async delBtn(id) {
      await this.$confirm("确定要删除吗");
      await DelTagApi(id);
      this.$message.success("删除成功");
      this.initData();
    },

    // 分页
    handleSizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.initData();
    },

    // 关闭清空
    close() {
      this.formData = {};
      this.queryData = {};
      this.selectList = [];
      this.teacherName = [];
      this.managerName = [];
      this.zhujiaoName = [];
      this.Time = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.contant {
  padding: 15px;
  background-color: #eaedf1;
}
</style>
